<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
	</head>
	<body>
		    <div class="wrap">
        <h1>
            You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
        </h1>

        <div class="saySection">
            <input type="text" id="inValue" class="txtSay"/>
            <input type="button" value="Say" id="btnSay" class="btnSay"/>
        </div>
    </div>
	</body>
	<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
	<script>
		var str="好丽友李莲英原来";
		var strarr=str.split("");
		var str2=""
		var num=0;
		var timer=setInterval(function(){
			if(strarr[num]==undefined){
				clearInterval(timer)
			}else{
				str2+=strarr[num];
			num++;
			$(".word").text(str2)
			}
			
		},300)
		 //作业 需求2：点击say按钮，上面的input中的内容，每隔固定时间，.word中添加一个字符，插入的就是input中的内容。
		 $("#btnSay").click(function(){
		 	var ss=$("#inValue").val()
		 	var	ssarr=ss.split("")
		 	var str3=""
		 	var num2=0
		 	var timer2=setInterval(function(){
			if(ssarr[num2]==undefined){
				clearInterval(timer2)
			}else{
				str3+=ssarr[num2];
			num2++;
			$(".word").text(str3)
			}
			
		    },300)
		 })
	</script>
</html>
